<template>
    <view class="container">
        <view class="filter-section">
            <picker 
                mode="date" 
                :value="startDate" 
                @change="onStartDateChange"
                fields="month"
            >
                <view class="picker-item">
                    开始日期：{{ startDate || '选择开始日期' }}
                </view>
            </picker>
            <picker 
                mode="date" 
                :value="endDate" 
                @change="onEndDateChange"
                fields="month"
            >
                <view class="picker-item">
                    结束日期：{{ endDate || '选择结束日期' }}
                </view>
            </picker>
        </view>

        <view class="mood-list">
            <block v-if="moodRecords.length > 0">
                <mood-card 
                    v-for="record in moodRecords" 
                    :key="record.id" 
                    :moodData="record"
                    @click="navigateToDetail"
                />
            </block>
            <view v-else class="empty-state">
                <text>暂无心情记录</text>
            </view>
        </view>

        <view class="pagination" v-if="moodRecords.length > 0">
            <button 
                class="page-btn" 
                @tap="loadMoreRecords" 
                :disabled="isLoading || !hasMore"
            >
                {{ isLoading ? '加载中...' : '加载更多' }}
            </button>
        </view>
    </view>
</template>

<script>
import moodApi from '@/api/mood';
import MoodCard from '@/components/MoodCard.vue';

export default {
    components: {
        MoodCard
    },
    data() {
        return {
            moodRecords: [],
            startDate: '',
            endDate: '',
            page: 1,
            pageSize: 10,
            isLoading: false,
            hasMore: true
        }
    },
    onLoad() {
        this.fetchMoodRecords();
    },
    methods: {
        async fetchMoodRecords() {
            if (this.isLoading) return;
            this.isLoading = true;

            try {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    startDate: this.startDate,
                    endDate: this.endDate
                };

                const result = await moodApi.listMoodRecords(params);
                
                if (result.records.length > 0) {
                    this.moodRecords = this.page === 1 
                        ? result.records 
                        : [...this.moodRecords, ...result.records];
                    this.hasMore = result.records.length === this.pageSize;
                } else {
                    this.hasMore = false;
                }
            } catch (error) {
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
            } finally {
                this.isLoading = false;
            }
        },
        loadMoreRecords() {
            this.page++;
            this.fetchMoodRecords();
        },
        onStartDateChange(e) {
            this.startDate = e.detail.value;
            this.page = 1;
            this.fetchMoodRecords();
        },
        onEndDateChange(e) {
            this.endDate = e.detail.value;
            this.page = 1;
            this.fetchMoodRecords();
        },
        navigateToDetail(id) {
            uni.navigateTo({
                url: `/pages/mood-detail/mood-detail?id=${id}`
            });
        }
    }
}
</script>

<style scoped>
.container {
    padding: 20rpx;
}

.filter-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.picker-item {
    background-color: #f0f0f0;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
}

.mood-list {
    margin-top: 20rpx;
}

.empty-state {
    text-align: center;
    color: #999;
    padding: 50rpx 0;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
}

.page-btn {
    background-color: #3cc51f;
    color: white;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
}

.page-btn:disabled {
    background-color: #cccccc;
}
</style> 